<script setup>
import { reactive, toRaw } from 'vue';

import { useDataBaseInfoStore } from '@/stores/dataBaseInfo.js'


const databaseStore = useDataBaseInfoStore();

const formState = reactive({
  fieldName: '',
  fileType: '',
  fieldSupplementTableName:'',
  fieldSupplementFieldName:'',
  fileDataType: '',
  fieldDatabaseType:"",
  description:''
});

const labelCol = {
  style: {
    width: '150px',
  },
};
const wrapperCol = {
  span: 14,
};
</script>

<template>
  <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-form-item label="字段名称">
      <a-input v-model:value="formState.fieldName" />
    </a-form-item>

    <a-form-item label="字段描述">
      <a-input v-model:value="formState.description" />
    </a-form-item>

    <a-form-item label="字段类型">
      <a-select
        ref="select"
        v-model:value="formState.fileType"
        style="width: 180px"
        @focus="focus"
      >
        <a-select-option value="default">一般字段/default</a-select-option>
        <a-select-option value="key">主键/key</a-select-option>
        <a-select-option value="foreignKey" >外键/foreignKey</a-select-option>
      </a-select>
    </a-form-item>


    <a-form-item v-if="formState.fileType=='foreignKey'" label="外键表名">
      <a-input v-model:value="formState.fieldSupplementTableName" />
    </a-form-item>

    <a-form-item v-if="formState.fileType=='foreignKey'" label="外键表主键名称">
      <a-input v-model:value="formState.fieldSupplementFieldName" />
    </a-form-item>

    <a-form-item label="字段数据类型">
      <a-select
        v-model:value="formState.fileDataType"
        style="width: 350px"
      >
        <a-select-option  value="INTTYPE">数值类型</a-select-option>
        <a-select-option  value="CHARTYPE">字符串类型</a-select-option>
        <a-select-option  value="DATETYPE">日期和时间类型</a-select-option>
      </a-select>
    </a-form-item>

    <a-form-item label="字段数据库类型">
      <a-select
        v-model:value="formState.fieldDatabaseType"
        style="width: 350px"

      >
        <a-select-opt-group label="数值类型">

        <a-select-option  value="TINYINT">TINYINT(小整数值)</a-select-option>
        <a-select-option  value="SMALLINT">SMALLINT(大整数值)</a-select-option>
        <a-select-option  value="MEDIUMINT" >MEDIUMINT(大整数值)</a-select-option>
        <a-select-option  value="INTEGER" >INTEGER(大整数值)</a-select-option>

        <a-select-option value="BIGINT" >BIGINT(极大整数值)</a-select-option>
        <a-select-option value="FLOAT" >FLOAT(单精度 浮点数值)</a-select-option>
        <a-select-option value="DOUBLE" >DOUBLE(双精度 浮点数值)</a-select-option>
        <a-select-option value="DECIMAL" >DECIMAL(	小数值)</a-select-option>

        </a-select-opt-group>

        <a-select-opt-group label="日期和时间类型">

          <a-select-option  value="DATE">DATE(日期值\)</a-select-option>
          <a-select-option  value="TIME">TIME(时间值或持续时间)</a-select-option>
          <a-select-option  value="YEAR">YEAR(年份值)</a-select-option>
          <a-select-option  value="DATETIME">DATETIME(混合日期和时间值)</a-select-option>
          <a-select-option  value="TIMESTAMP">TIMESTAMP(混合日期和时间值，时间戳)</a-select-option>

        </a-select-opt-group>

        <a-select-opt-group label="字符串类型">

          <a-select-option  value="CHAR">CHAR(定长字符串)</a-select-option>
          <a-select-option  value="VARCHAR">VARCHAR(变长字符串)</a-select-option>
          <a-select-option  value="TINYBLOB">TINYBLOB(不超过 255 个字符的二进制字符串)</a-select-option>
          <a-select-option  value="TINYTEXT">TINYTEXT(短文本字符串)</a-select-option>
          <a-select-option  value="BLOB">BLOB(二进制形式的长文本数据)</a-select-option>
          <a-select-option  value="TEXT">TEXT(长文本数据)</a-select-option>
          <a-select-option  value="MEDIUMBLOB">MEDIUMBLOB(二进制形式的中等长度文本数据)</a-select-option>

          <a-select-option  value="MEDIUMTEXT">MEDIUMTEXT(中等长度文本数据)</a-select-option>
          <a-select-option  value="LONGBLOB">LONGBLOB(二进制形式的极大文本数据)</a-select-option>
          <a-select-option  value="LONGTEXT">LONGTEXT(极大文本数据)</a-select-option>


        </a-select-opt-group>


      </a-select>
    </a-form-item>

  </a-form>
  <a-button type="primary" @click="databaseStore.addTableField(formState)">创建</a-button>
</template>

<style scoped>

</style>
